<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>社区图书馆多功能厅预约后台管理系统</title>
  <link rel="stylesheet" href="/layui2.4/css/layui.css">
  <style type="text/css">
    /*左侧导航*/
    .layui-tree-skin-sidebar li i {
      color: rgba(255, 255, 255, .7);
      display: none;
    }

    .layui-tree-skin-sidebar li a cite {
      color: rgba(255, 255, 255, .7)
    }

    .layui-tree-skin-sidebar li .layui-tree-spread {
      display: block;
      position: absolute;
      right: 30px;
    }

    .layui-tree-skin-sidebar li {
      line-height: 45px;
      position: relative;
    }

    .layui-tree-skin-sidebar li ul {
      margin-left: 0;
      background: rgba(0, 0, 0, .3);
    }

    .layui-tree-skin-sidebar li ul a {
      padding-left: 20px;
    }

    .layui-tree-skin-sidebar li a {
      height: 45px;
      border-left: 5px solid transparent;
      box-sizing: border-box;
      width: 100%;
    }

    .layui-tree-skin-sidebar li a:hover {
      background: #4E5465;
      color: #fff;
      border-left: 5px solid #009688;
    }

    .layui-tree-skin-sidebar li a.active {
      background: #009688;
    }
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">后台管理系统</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href=""></a></li>
      <li class="layui-nav-item"><a href=""></a></li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item"><a href="/logout">退了</a></li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <div id="sidemenubar" lay-filter="test"></div>
    </div>
  </div>

  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowClose="true">
      <ul class="layui-tab-title">
        <li class="layui-this">welcome</li>
      </ul>
      <div class="layui-tab-content" style="width:100%;height: 550px">
        <div class="layui-tab-item layui-show">欢迎使用</div>
      </div>

    </div>
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © 2021 layui.com
  </div>
</div>

<!--layui.js文件必须放到HTML内容的最后-->
<script src="/layui2.4/layui.js"></script>
<script src="/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript">


  const menuData = [{
    "name": "用户管理",
    "id": '1',
    "url": null,
    "children": [{"name": "用户管理", "id": '2', "url": "/user"}]
  }, {
    "name": "多功能厅管理",
    "id": '3',
    "url": null,
    "children": [
      {"name": "多功能厅管理", "id": '4', "url": "/room"},
      {"name": "预约管理", "id": '5', "url": "/room/reservation"},
      {"name": "评论管理", "id": '6', "url": "/room/comment"},
    ]
  }];

  layui.use(['element', 'tree'], function () {
    const element = layui.element;
    const $ = layui.$;
    element.on('tab(demo)', function (data) {
    });
    console.log(menuData)
    layui.tree({
      elem: '#sidemenubar' //传入元素选择器
      , skin: 'sidebar'  //自定义tree样式的类名
      , nodes: menuData //节点数据
      , click: function (node, item) {
        //node即为当前点击的节点数据,item就是被点击的a标签对象了
        //导航按钮选中当前
        $('#sidemenubar a').removeClass('active');
        $(item).addClass('active');
        $(item).siblings('.layui-tree-spread').click();
        //添加新tab
        activeTab.init(node.name, node.url, node.id);
      }
    });

    const activeTab = {
      tabTit: '', //tab titile标题
      tabUrl: '', //tab内容嵌套iframe的src
      tabId: '', //tab 标签的lay-id
      tabCon: function () {
        let result;
        $.ajax({
          type: 'get',
          url: this.tabUrl,
          dataType: 'html',
          success: function (data) {
            result = data;
          }
        })
        return result;
      },
      addTab: function () { //新增tab项
        element.tabAdd('demo', {
          title: this.tabTit
          ,
          content: '<iframe frameborder="no" border="0" style="width:100%;height: 550px;" src = ' + this.tabUrl + ' ></iframe>' //支持传入html
          ,
          id: this.tabId
        })
      },
      changeTab: function () { //选中tab项
        element.tabChange('demo', this.tabId);
      },
      ishasTab: function () { //判断tab项中是否包含
        const _this = this;
        let dataId, isflag;
        const arrays = $('.layui-tab-title li');
        $.each(arrays, function (idx, ele) {
          dataId = $(ele).attr('lay-id');
          if (dataId == _this.tabId) {
            isflag = true
            return false
          } else {
            isflag = false
          }
        })
        return isflag
      },
      init: function (tabtit, taburl, tabid) {
        const _this = this;
        _this.tabUrl = taburl;
        _this.tabId = tabid;
        _this.tabTit = tabtit;
        if (taburl) {
          if (!_this.ishasTab()) {
            _this.addTab();
          }
          _this.changeTab();
        } else {
          return false
        }
      }
    }
  });

</script>
</body>
</html>
